<template>
  <el-button type="" @click="add">测试</el-button>
  {{ age1 }} 
  <hr>
  sr <br>
  <sr :name1="name" :person1="person" :list1="list"></sr>
  <hr>
  ts <br>
  <ts
    :name="name"
    :person="person"
    :list="list2"
    :list2="[1,2,3]"
    :list3="list4"
  >
    <h1>测试插槽</h1>
    <template #col="{ row, index }">
      序号：{{ index }}<br>
      内容：{{ row }}
    </template>
    
  </ts>
  <op></op>
  <hr>

</template>

<script setup lang="ts">
  import { ref, reactive, computed } from 'vue'
  import sr from './10-sreadonly.vue'
  import ts from './20-ts.vue'
  import op from './15-option.vue'
   
  const name = ref('我是 ref')
  const person = reactive({
    name: '我是 reactive',
    age: 1
  })

  const { age } = person


  const age1 = computed(() => {
    return age + 10
  })

  const add = () => {
    person.age += 1
  }

  const list = reactive([
    {
      name: 'aaa'
    },
    {
      name: 'bbb'
    }
  ])

  const list2 = reactive([
    {
      name: '11',
      age: 10
    }
  ])

  const list3 = reactive([1,2])
  const list4 = reactive(['1','2'])


</script>